<!--
	描述：拥有基本样式和结构,根据分发来设计内容,是所有弹窗的基础
-->
<template>
	<transition name="nomal-fade">
		<div class="message-box" v-if="isShow">
			<div class="mask" @click="cancel"></div>
			<div class="message-content">
				<!--标题插槽-->
				<p class="titles">
					<slot name="title"></slot>
				</p>
				<div class="msvalue custom-scrollbar">
					<!--内容插槽-->
					<slot></slot>
				</div>
				<div class="btn-group">
					<!--按钮插槽,默认是两个按钮-->
					<slot name="button">
						<button class="nomalButton specialButton" @click="cancel" v-if="showCance">× 取消</button>
						<button class="nomalButton" @click="confirm">√ 确定</button>
					</slot>
				</div>
			</div>
		</div>
	</transition>
</template>

<script>
	export default {
		props: {
			showCance: {
				default: true
			}
		},
		data() {
			return {
				isShow: false,
			}
		},
		computed: {},
		methods: {

			confirm() {
				// console.log("点击确认");
				this.$emit("confirm")
			},
			cancel() {
				this.$emit("cancel")
			},
			open() {
				this.isShow = true
			},
			close() {
				this.isShow = false
				setTimeout(() => {
					this.$destroy()
					document.body.removeChild(this.$el)
				}, 300)
			},
			hide() {
				this.isShow = false
			}
		}
	}
</script>
<style scoped>
	.message-box {
		position: absolute;
		width: auto;
		height: auto;
		
	}

	.mask {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
	}

	.message-content {
		width: 500px;
		height: auto;
		background: #FFFFFF;
		position: fixed;
		left: 50%;
	    top: 50%; 
		transform: translate(-50%, -50%);
		z-index: 999;
		border-radius: 5px;
		padding: .2rem;
		border: 1px solid #D6D6D6;
		
	}

	.error {
		color: red;
	}

	.titles {
		color: rgb(055, 055, 055);
		margin-bottom: .1rem;
		font-weight: 1000;
		height: 20px;
	}

	.msvalue {
		background: #FFFFFF;
		border-top: 1px solid #D6D6D6;
		min-height: 1rem;
		max-height: 4.6rem;
		padding: .1rem;
		overflow-y: auto;
	}

	.btn-group {
		margin-top: .1rem;
		padding: 0.1rem;
		text-align: right;
	}

	.cancelButton {
		margin-right: .3rem;
	}
</style>
